//	操作栏组件
import React from 'react';
import { Space, Tooltip, Button, Popconfirm } from 'antd';
import styles from '../index.module.scss';

import { FontSizeOutlined, PieChartOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons';

interface listItemType {
	name: string;
	id: string;
	effect: string;
	isFile?: boolean;
}

interface IProps {
	record: listItemType;
	handleView: ( item: any ) => void;
	handleDelete: ( item: any ) => void;
	addDashbord: ( item: any ) => void;
	handleEditFolder: ( item: listItemType ) => void;
	handleDeleteFolder: ( item: listItemType ) => void;
	handleRename: ( item: any ) => void;
	btnAuth: any;
}


const OperateComponent = React.memo( ( props: IProps ) => {
	return props.btnAuth.includes( 'bi_graphLib_action' ) ? (
		<Space size="middle">
			{
				props.record.isFile ? 
					(
						<>
							<Tooltip placement="topRight" title="编辑">
								<Button
									type="text"
									icon={ <FormOutlined  className={ styles.green_btn }/> }
									onClick={() => props.handleEditFolder( props.record )}
								></Button>
							</Tooltip>
							<Tooltip placement="topRight" title="删除">
								<Popconfirm
									okText="确定"
									cancelText="取消"
									title="确定删除这一项？"
									placement="bottom"
									onConfirm={() => props.handleDeleteFolder( props.record )}
								>
									<Button type="text" icon={ <DeleteOutlined className={ styles.green_btn }/> }></Button>
								</Popconfirm>
							</Tooltip>
						</>
					) : 
					(
						<>
							<Tooltip placement="topRight" title="查看">
								<Button
									type="text"
									icon={<span className={`iconfont bdhchakanxiangqing ${styles.green_btn}`}></span>}
									onClick={() => props.handleView( props.record )}
								></Button>
							</Tooltip>
							<Tooltip placement="topRight" title="添加至仪表板">
								<Button
									type="text"
									icon={<PieChartOutlined className={ styles.green_btn }/>}
									onClick={() => {
										props.addDashbord( props.record );
									}}
								></Button>
							</Tooltip>
							<Tooltip placement="topRight" title="重命名">
								<Button
									type="text" icon={ <FontSizeOutlined className={`iconfont ${ styles.green_btn } `}/> }
									onClick={ () => {
										props.handleRename( props.record );
									}}
								></Button>
							</Tooltip>

							<Tooltip placement="topRight" title="删除">
								<Popconfirm
									okText="确定"
									cancelText="取消"
									title="确定删除这一项？"
									placement="bottom"
									onConfirm={() => props.handleDelete( props.record )}
								>
									<Button type="text" icon={ <DeleteOutlined className={ styles.green_btn }/> }></Button>
								</Popconfirm>
							</Tooltip>
						</>
					)
			}
		</Space>
	) : (
		<Space size="middle">
			{
				!props.record.isFile && (
					<Tooltip placement="topRight" title="查看">
						<Button
							type="text"
							icon={<span className={`iconfont bdhchakanxiangqing ${styles.green_btn}`}></span>}
							onClick={() => props.handleView( props.record )}
						></Button>
					</Tooltip>
				)
			}
		</Space>
	);
} );
OperateComponent.displayName = 'OperateComponent';

export default OperateComponent;